<template>
    <div class="dndList">
        <div :style="{width:width1}" class="dndList-list">
            <h3>{{ list1Title }}</h3>
            <draggable :set-data="setData" :list="list1" group="article" class="dragArea">
                <div v-for="element in list1" :key="element.id" class="list-complete-item">
                    <div class="list-complete-item-handle">
                        {{ element.id }}[{{ element.author }}] {{ element.title }}
                    </div>
                    <div style="position:absolute;right:0px;">
                        <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
                            <i style="color:#ff4949" class="el-icon-delete" ></i>
                        </span>
                    </div>
                </div>
            </draggable>
        </div>
        <div :style="{width:width2}" class="dndList-list">
            <h3>{{ list2Title }}</h3>
            <draggable :list="list2" group="article" class="dragArea">
                <div v-for="element in list2" :key="element.id" class="list-complete-item">
                    <div class="list-complete-item-handle2" @click="pushEle(element)">
                        {{ element.id }} [{{ element.author }}] {{ element.title }}
                    </div>
                </div>
            </draggable>
        </div>
    </div>
</template>

<script>
    import draggable from '/vue/libs/vuedraggable/vuedraggable.js';

    module.exports = {
        name: 'DndList',
        components: {"draggable": draggable },
        props: {
            list1: {
                type: Array,
                default() {
                    return []
                }
            },
            list2: {
                type: Array,
                default() {
                    return []
                }
            },
            list1Title: {
                type: String,
                default: 'list1'
            },
            list2Title: {
                type: String,
                default: 'list2'
            },
            width1: {
                type: String,
                default: '48%'
            },
            width2: {
                type: String,
                default: '48%'
            }
        },
        methods: {
            isNotInList1(v) {
                return this.list1.every(k => v.id !== k.id)
            },
            isNotInList2(v) {
                return this.list2.every(k => v.id !== k.id)
            },
            deleteEle(ele) {
                for (const item of this.list1) {
                    if (item.id === ele.id) {
                        const index = this.list1.indexOf(item)
                        this.list1.splice(index, 1)
                        break
                    }
                }
                if (this.isNotInList2(ele)) {
                    this.list2.unshift(ele)
                }
            },
            pushEle(ele) {
                for (const item of this.list2) {
                    if (item.id === ele.id) {
                        const index = this.list2.indexOf(item)
                        this.list2.splice(index, 1)
                        break
                    }
                }
                if (this.isNotInList1(ele)) {
                    this.list1.push(ele)
                }
            },
            setData(dataTransfer) {
                // to avoid Firefox bug
                // Detail see : https://github.com/RubaXa/Sortable/issues/1012
                dataTransfer.setData('Text', '')
            }
        }
    }
</script>

<style scoped>
    .dndList {
        background: #fff;
        padding-bottom: 40px;
    }

        .dndList:after {
            content: "";
            display: table;
            clear: both;
        }

        .dndList .dndList-list {
            float: left;
            padding-bottom: 30px;
        }

            .dndList .dndList-list:first-of-type {
                margin-right: 2%;
            }

            .dndList .dndList-list .dragArea {
                margin-top: 15px;
                min-height: 50px;
                padding-bottom: 30px;
            }

    .list-complete-item {
        cursor: pointer;
        position: relative;
        font-size: 14px;
        padding: 5px 12px;
        margin-top: 4px;
        border: 1px solid #bfcbd9;
        transition: all 1s;
    }

    .list-complete-item-handle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 50px;
    }

    .list-complete-item-handle2 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 20px;
    }

    .list-complete-item.sortable-chosen {
        background: #4AB7BD;
    }

    .list-complete-item.sortable-ghost {
        background: #30B08F;
    }

    .list-complete-enter,
    .list-complete-leave-active {
        opacity: 0;
    }
</style>
